<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="闸门名" prop="wagaName">
        <el-input
          v-model="queryParams.wagaName"
          placeholder="请输入闸门名"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="wagaType">
        <el-select v-model="queryParams.wagaType" placeholder="类型" clearable size="small"
                   :style="{width: '100%'}">
          <el-option v-for="dict in dict.type.waga_type"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开启类型" prop="wagaOpenType">
        <el-select v-model="queryParams.wagaOpenType" placeholder="类型" clearable size="small"
                   :style="{width: '100%'}">
          <el-option v-for="dict in dict.type.waga_open_type"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-if="false"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="page" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="闸门id" prop="wagaCode" width="150"/>
      <el-table-column label="闸门名" prop="wagaName" width="200"/>
      <el-table-column label="厂站" prop="factoryStationId" width="145">
        <template slot-scope="scope">
          <div v-for="item in allFactoryStationList">
            <span v-if="item.id === scope.row.factoryStationId">{{item.factoryStationName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="wagaType" align="center" width="150">
        <template slot-scope="scope">
          <div v-for="dict in dict.type.waga_type">
            <span v-if="dict.value === scope.row.wagaType">{{dict.label}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="开启类型" prop="wagaOpenType" align="center" width="140">
        <template slot-scope="scope">
          <div v-for="dict in dict.type.waga_open_type">
            <span v-if="dict.value === scope.row.wagaOpenType">{{dict.label}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="最小开度" prop="wagaMinOpenHeight" align="center" width="140"/>
      <el-table-column label="宽" prop="wagaWidth" align="center" width="140"/>
      <el-table-column label="高" prop="wagaHeight" align="center" width="140"/>
      <el-table-column label="底坎高程" prop="wagaDkgc" align="center" width="140"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPage"
    />

    <!-- 添加或修改解析元素对话框 -->
    <el-dialog :visible.sync="open" :title="title" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="200px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="厂站" prop="factoryStationId">
              <el-select v-model="form.factoryStationId" placeholder="厂站" clearable size="small"
                         :style="{width: '100%'}" :disabled="dialogType === 'update'">
                <el-option v-for="item in allFactoryStationList"
                           :key="item.id" :label="item.factoryStationName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="闸门名" prop="wagaName">
              <el-input placeholder="请输入闸门名" v-model="form.wagaName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="闸门ID" prop="wagaCode">
              <el-input placeholder="请输入闸门ID" v-model="form.wagaCode" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="wagaType">
              <el-select v-model="form.wagaType" placeholder="类型" clearable size="small"
                         :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.waga_type"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开启类型" prop="wagaOpenType">
              <el-select v-model="form.wagaOpenType" placeholder="类型" clearable size="small"
                         :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.waga_open_type"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最小开度" prop="wagaMinOpenHeight">
              <el-input placeholder="请输入最小开度" v-model="form.wagaMinOpenHeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="宽" prop="wagaWidth">
              <el-input placeholder="请输入宽" v-model="form.wagaWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高" prop="wagaHeight">
              <el-input placeholder="请输入高" v-model="form.wagaHeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="底坎类型" prop="wagaDkType">
              <el-select v-model="form.wagaDkType" placeholder="底坎类型" clearable size="small"
                         :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.waga_dk_type"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="底坎高程" prop="wagaDkgc">
              <el-input placeholder="请输入底坎高程" v-model="form.wagaDkgc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="边墩形状" prop="wagaBdxz">
              <el-select v-model="form.wagaBdxz" placeholder="边墩形状" clearable size="small"
                         :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.waga_bdxz"
                           :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="闸墩形状" prop="wagaZdxz">
              <el-select v-model="form.wagaZdxz" placeholder="闸墩形状" clearable size="small" :style="{width: '100%'}">
                <el-option v-for="dict in dict.type.waga_zdxz" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="闸孔数" prop="wagaZks">
              <el-input-number v-model="form.wagaZks" :min="1" :precision="0" label="闸孔数" :style="{width: '100%'}"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="堰顶高程" prop="wagaYdgc">
              <el-input-number v-model="form.wagaYdgc" :precision="2" label="堰顶高程" :style="{width: '100%'}"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="堰宽(单孔)" prop="wagaYkdk">
              <el-input-number v-model="form.wagaYkdk" label="堰宽（单孔）" :style="{width: '100%'}"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行近流速" prop="wagaXjls">
              <el-input placeholder="请输入行近流速" v-model="form.wagaXjls"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="孔流流量系数临界点" prop="klxsljd">
              <el-input placeholder="请输入孔流流量系数临界点" v-model="form.klxsljd"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="堰流流量系数临界点" prop="ylxsljd">
              <el-input placeholder="请输入堰流流量系数临界点" v-model="form.ylxsljd"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="孔流系数大于临界点公式" prop="klxsLargeFormula">
              <el-input placeholder="请输入孔流系数大于临界点公式" v-model="form.klxsLargeFormula"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="孔流系数小于临界点公式" prop="klxsSmallFormula">
              <el-input placeholder="请输入孔流系数小于临界点公式" v-model="form.klxsSmallFormula"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="堰流系数大于临界点公式" prop="ylxsLargeFormula">
              <el-input placeholder="请输入堰流系数大于临界点公式" v-model="form.ylxsLargeFormula"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="堰流系数小于临界点公式" prop="ylxsSmallFormula">
              <el-input placeholder="请输入堰流系数小于临界点公式" v-model="form.ylxsSmallFormula"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getAllFactoryStation,
  } from "@/api/commonconfig/factorystation";
  import {
    page,
    getAllWagaDefinition,
    getWagaDefinitionDetail,
    insertWagaDefinition,
    updateWagaDefinition,
    delWagaDefinition,
  } from "@/api/commonconfig/wagadefinition";

  export default {
    dicts: ['waga_type', 'waga_open_type', 'waga_bdxz', 'waga_zdxz', 'waga_dk_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        page: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          factoryStationId: '',
          id: '',
          wagaCode: '',
          wagaName: '',
          wagaType: '',
          wagaOpenType: '',
          wagaMinOpenHeight: '',
          wagaWidth: '',
          wagaHeight: '',
          wagaDkgc: '',
          wagaDkType: '',
          wagaXjls: '',
          wagaBdxz: '',
          wagaZdxz: '',
          wagaZks: '',
          wagaYdgc: '',
          wagaYkdk: '',
          klxsljd: '',
          ylxsljd: '',
          klxsLargeFormula: '',
          klxsSmallFormula: '',
          ylxsLargeFormula: '',
          ylxsSmallFormula: '',
        },
        dialogType: '',
        allFactoryStationList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          wagaName: '',
          wagaType: '',
          wagaOpenType: '',
        },
        // 表单校验
        rules: {
          factoryStationId: [{
            required: true,
            message: '请选择厂站',
            trigger: 'blur'
          }],
          id: [{
            required: true,
            message: '请输入闸门id',
            trigger: 'blur'
          }],
          wagaName: [{
            required: true,
            message: '请输入厂站名称',
            trigger: 'blur'
          }],
          wagaType: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }],
          wagaOpenType: [{
            required: true,
            message: '请输入流域面积',
            trigger: 'blur'
          }],
          wagaDkType: [{
            required: true,
            message: '请选择底坎类型',
            trigger: 'change'
          }],
          wagaBdxz: [{
            required: true,
            message: '请选择边墩形状',
            trigger: 'change'
          }],
          wagaZdxz: [{
            required: true,
            message: '请选择闸墩形状',
            trigger: 'change'
          }],
          wagaZks: [{
            required: true,
            message: '请输入闸孔数',
            trigger: 'blur'
          }],
          wagaYdgc: [{
            required: true,
            message: '请输入堰顶高程',
            trigger: 'blur'
          }],
          wagaYkdk: [{
            required: true,
            message: '请输入堰宽(单孔)',
            trigger: 'blur'
          }],
          wagaMinOpenHeight: [{
            required: true,
            message: '请输入汛限水位',
            trigger: 'blur'
          }],
          wagaWidth: [{
            required: true,
            message: '请输入正常水位',
            trigger: 'blur'
          }],
          wagaHeight: [{
            required: true,
            message: '请输入正常库容',
            trigger: 'blur'
          }],
          wagaDkgc: [{
            required: true,
            message: '请输入坝下水位',
            trigger: 'blur'
          }],

        },
      };
    },
    created() {
      this.getPage();
      this.factoryStationList();
    },
    methods: {
      /** 查询分页列表 */
      getPage() {
        this.loading = true;
        page(this.queryParams).then(response => {
            this.page = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 获取所有厂站定义数据
      factoryStationList() {
        getAllFactoryStation().then(response => {
          this.allFactoryStationList = response.data
        });
      },
      // 表单重置
      reset() {
        this.form = {
          id: '',
          factoryStationName: '',
          factoryStationType: '',
          basArea: '',
          fsltdz: '',
          normalWaterlevel: '',
          ttcp: '',
          dsflz: '',
          ckflz: '',
          ddz: '',
          ddcp: '',
          tailWaterlevel: '',
          clxs: '',
          stssxs: '',
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getPage();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.title = "新增闸门定义信息";
        this.open = true;
        this.dialogType = "add";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getWagaDefinitionDetail(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改闸门定义信息";
          this.dialogType = "update";
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        let that = this;
        that.$refs["form"].validate(valid => {
          if (valid) {
            if ('update' === that.dialogType) {
              updateWagaDefinition(that.form).then(response => {
                that.$modal.msgSuccess("修改成功");
                that.open = false;
                that.getPage();
              });
            } else {
              insertWagaDefinition(that.form).then(response => {
                that.$modal.msgSuccess("新增成功");
                that.open = false;
                that.getPage();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id || this.ids;
        this.$modal.confirm('是否确认删除？').then(function () {
          return delWagaDefinition(id);
        }).then(() => {
          this.getPage();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/user/export', {
          ...this.queryParams
        }, `user_${new Date().getTime()}.xlsx`)
      },
    }
  };
</script>
